Responsive Form Design
Create forms that seamlessly transition from mobile to desktop and back.
Create forms that seamlessly transition from mobile to desktop and back.
Creating forms that are functional is a relatively obvious goal for a company that hosts web forms. But, creating forms that are visually balanced but also brand neutral (since not all will be customized), easily customizable (for the times when they will be customized), and responsive to different devices right out of the box is a little bit of a bigger challenge. And, we didn't want organizations (especially small ones, who rarely had developers on staff) to be responsible for building forms that scale regardless of device, screen size, or browser.
I believe building a simple, responsive form was the best way to create something that met our business need of making a generic form and our client's business needs of having a form that can be completed on any device.
My contributions on this project included HTML, CSS, form design, prototyping, analytics of browser and device usage, and user testing.
I believe building a simple, responsive form was the best way to create something that met our business need of making a generic form and our client's business needs of having a form that can be completed on any device.
My contributions on this project included HTML, CSS, form design, prototyping, analytics of browser and device usage, and user testing.
On this version of the form, a donor can see all of the different elements on one screen. The screen remains relatively constant if viewed on anything from a regular monitor to tablet with a landscape layout.
This form takes advantage of HTML5 and CSS3 capabilities, but also is backwards compatible.
This form takes advantage of HTML5 and CSS3 capabilities, but also is backwards compatible.
On this version of the form, I adjusted the CSS with media queries to realign the form elements in a way that makes the most sense for a donor on the go (or even just lying in bed). Because of the HTML5 elements, the autofill is enabled and allows a donor to quickly complete the form. The width and the height of the entry fields and buttons adjusts to be more applicable to a touchscreen than a keyboard. And the less important information (like the appeal text, courtesy of hispter ipsum) drops to the bottom of the screen.
Fortunately for our organizations, as well, all of these elements could be overridden if they so desired.
Fortunately for our organizations, as well, all of these elements could be overridden if they so desired.
Lastly, I was able to pull together a style library using jquery plugins that scaled on mobile devices, to avoid the problem of popup screens that blow out the design and make it almost impossible to finish a transaction on a mobile device.
